import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
import global from '../../global';
import { ScrollView, Button, Map, Swiper, SwiperItem, Picker, Input, Image } from '@tarojs/components'
import Request from "../../api";
import Event from "../../event";
import {debounce} from '../../utils';

export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      jobs: [],
      jobName: '',
      page: 1,
      pageSize: 20
    };
    this.loadJobs = this.loadJobs.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.loadingMore = false;
    this.canLoadMore = true;
  }

  componentWillMount () {
    this.loadJobs();
  }

  componentWillUnmount () {}

  componentDidHide () { }


  async loadJobs() {
    if (this.loadingMore || !this.canLoadMore) {
      return;
    }
    this.loadingMore = true;
    try {
      let res = await Request.get(`/business/jobs/list?status=1&name=${this.state.jobName}&pageNum=${this.state.page}&pageSize=${this.state.pageSize}`);
      if (res.data.code !== 200) {
        throw new Error();
      }
      let temp = [];
      if (this.state.page > 1) {
        temp = this.state.jobs;
      }
      this.setState({
        jobs: temp.concat(res.data.rows)
      }, () => {
        if (this.state.jobs.length === res.data.total) {
          this.canLoadMore = false;
        }
        this.loadingMore = false;
      })
    } catch (e) {
      console.log('加载职位数据失败')
    }
  }

  async handleSearch(value) {
    this.canLoadMore = true;
    this.setState({
      jobName: value
    })
    this.setState({
      page: 1,
      pageSize: 20
    }, this.loadJobs)
    // debounce(() => {
    //
    // }, 100)
  }

  async handleScrollToEnd() {
    this.setState({
      page: ++this.state.page,
      pageSize: 20
    }, this.loadJobs)
  }

  render () {

    let  {jobs, jobName} = this.state;
    return (
      <View className='job_list'>
        <View className='search_input'>
          <Text className='iconfont icon-sousuo color-grey size36'/>
          <Input type='text' value={jobName} onInput={(e) => this.handleSearch(e.detail.value)} placeholder='搜索职位'/>
        </View>
        <ScrollView  scrollY={true} style={{height: 'calc(100vh - 60px)'}} onScrollToLower={this.handleScrollToEnd.bind(this)}>
          {
            jobs.length !== 0 ? jobs.map(item => {
                return (
                  <View className='job_item'>

                    <View className='row'>
                      <Text className='job_name'>{item.name}</Text>
                      <Text className='job_salary'>{item.salary}</Text>
                    </View>
                    <View className='row'>
                      <Text className='job_experience'>{item.experience} {item.education} {item.masterType === '0' ? '个人招聘' : '企业招聘' } </Text>
                      <Text className='job_status' style={{color: item.status === '1' ? 'green' : 'red'}}>{item.status === '1' ? '招聘中' : '停止招聘'}</Text>
                    </View>
                    <View className='row'>
                      <View className='master_info'>
                        <Image src={require('./img/user.png')}/>
                        <Text>{item.masterType === '0' ? item.wxUserName : item.companyName}</Text>
                      </View>
                      <View className='action_container'>
                        <Text className='size32 color-green apply' onClick={async () => {
                          global.currentApplyJob = item;
                          global.isApplyJob = true;
                          await Taro.navigateTo({
                            url: '/pages/job_detail/index'
                          })
                        }}>我要投递</Text>
                      </View>
                    </View>

                  </View>
                );
              })
              :
              <View className='message_container'>
                尚未有相关岗位信息
              </View>
          }
        </ScrollView>
      </View>
    )
  }
}
